<template>
	<div class="prize-list-box">
		 <Header :headerObj = 'headerObj'></Header>
		<div v-if="lotteryArray.length>0" class="connect-box" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
			<ul >
				<li v-for="v of lotteryArray " :key = 'v.prizeId'>
				   <div class="left-box">
				   	  <div class="mark-box">
				   	  	  {{v.prizeType=='1'?'奖品':'礼券'}}
				   	  </div>
				   	  <template v-if="v.prizeType=='1'">
                           <img :src="v.picUrl || defaultPngSW"/>
					   </template>
					  <template v-if="v.prizeType=='2'">
                           <img :src="v.picUrl || defaultPngLQ"/>
					  </template>				   	  
				   </div>
				   <div class="middle-box">
				   		<p class="top-text">{{v.prizeNm}}</p>
				   		<!--<p class="middle-text">来自：该字段太君未提供接口</p>-->
				   		<p class="middle-text">中奖时间：{{v.crtTime}}</p>
				   		<p class="bottom-text">{{v.effeStartTime.slice(0,10)}} 至 {{v.effeEndTime.slice(0,10)}}</p>
				   </div>				  
				   <template v-if="v.expire">
				   	    <div class="btn-gray"  @click="clickSingleLottery(v)">已过期</div>
				   </template>
				   <template v-else>
				   	 <div class="btn" @click="clickSingleLottery(v)"> 查看</div>
				   </template>
				</li>
			</ul>
		</div>
		<div v-else class="noprize-box">
		</div>
		<TurntableCom v-if='isTurntable'  :winInfoData ='winInfoData'  fromCom= "fromMinePrizeCom"  @formChildMsg='formChildData' />
	</div>
</template>

<script>
	import TurntableCom from '@/components/lotteryCom/turntableCom'; //抽奖组件
	export default{
		components:{
			 TurntableCom,//抽奖组件
		},
		data(){
			return {
              lotteryArray:[],//直播列表
              isTurntable:false,//抽奖组件
              winInfoData:{},//单个抽中中奖信息
              page: 1,
              busy: false,
              defaultPngSW:require("@/assets/images/choujiang/shiwu.png"),
		          defaultPngLQ:require("@/assets/images/choujiang/liquan.png"),
		          getPlatform:fun.getPlatform(), //app wx
			  headerObj:{
				'isShowBack':true,
				'isShowClose':false,
				'isShowMine':false,
				'fromType':'mine',
				'titleText':'我的奖品',
				'color':'#27344B'
			},	  
			}
		},
		created(){
			this.$store.dispatch("hideNav");
			this.getWinListData()
		},
		mounted(){
			 
		},
		methods:{
			loadMore() {
				this.busy = true;
				setTimeout(() => {
					this.page++;
					this.getWinListData();
				}, 200);
			},
			formChildData(data){//子组件传过来的数据				
				switch (data.type){					
						case 'closeAllPrizeCom'://关闭抽奖所有组件并刷新列表组件
						   this.isTurntable = false;
						   this.lotteryArray = [];
						   this.page = 0;
						   this.loadMore()
						break;
						case 'closeAllPrizeComNoRefreshPage'://关闭抽奖所有组件 
						   this.isTurntable = false;
						break;
						
					default:
						break;
				}
			},
			clickSingleLottery(v){//点击单个抽奖
				this.isTurntable = true;
				this.winInfoData = v;
			},
			getWinListData(){//奖品列表
				this.$http.get("/lotto/userLottoTickets?page="+this.page+"&pageSize=10").then(
					res => {
						//console.log(res.data.data)
						//res.data.data = []
						if(res.data.code == "000000") {
							if(res.data.data.length){
								this.busy = false;
								this.lotteryArray = [...this.lotteryArray,...res.data.data];
								if(res.data.data.length < 10){
									this.busy = true;
								}
							}
							
//							this. lotteryArray   =[{
//							  "prizeId": 326,
//							  "prizeType": 1,
//							  "positionId": null,
//							  "effeStartTime": "2021-05-21 00:00:00",
//							  "effeEndTime": "2021-06-21 23:59:59",
//							  "rwAddress": true,
//							  "winDesc": null,
//							  "picUrl": "https://saas-zxyhzb.oss-cn-shenzhen.aliyuncs.com/yidong/20210521/1621578103688.png",
//							  "ticketNo": "JHASJKDHJKDHS券码",
//							  "prizeNm": "星星1",
//							  "roomId": "1869",
//							  "userName": null,
//							  "mobile": null,
//							  "useAddress": null,
//							  "expire": false
//							},
//							{
//							  "prizeId": 327,
//							  "prizeType": 2,
//							  "positionId": null,
//							  "effeStartTime": "2021-05-21 00:00:00",
//							  "effeEndTime": "2021-06-21 23:59:59",
//							  "rwAddress": false,
//							  "winDesc": null,
//							  "picUrl": "https://saas-zxyhzb.oss-cn-shenzhen.aliyuncs.com/yidong/20210521/1621578103688.png",
//							  "ticketNo": "JHASJKDHJKDHS券码",
//							  "prizeNm": "星星2",
//							  "roomId": "1869",
//							  "userName": null,
//							  "mobile": null,
//							  "useAddress": null,
//							  "expire": false
//							}]
						} else {
							console.log('我的奖品列表返回error', res.data)
						}
					},
					err => {
						console.log(err);
					}
				);
			}
		}
	}
</script>

<style scoped="scoped">
	.left-box img{
		width: 155px;
		height: 155px;
	}
	.mark-box{
		width: 72px;
		height: 32px;
		background: rgba(0,0,0,0.6);
		/*opacity: 0.6;*/
		line-height: 32px;
		text-align: center;
		position: absolute;
		top: 0;
		left: 0;
		font-size: 19px;
		color: white;
	}
	.middle-text{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin: 20px 0;
		color: #999999;
	}
		.bottom-text{
		margin: 20px 0;
		color: #999999;
	}
	.top-text{
		font-size: 32px;
		color: black;
		 overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.middle-box{
	     width: 331px;
		/*background: salmon;*/
		margin-left: 38px;
		font-size: 22px;
	}
	.left-box{
		width: 155px;
		height: 155px;
		background: #FFFFFF;
		border: 1px solid #EDEDED;
		margin-left: 26px;
		position: relative;
	}
	.btn{
		width: 133px;
		height: 55px;
		background: linear-gradient(-50deg, #F2324C, #FF6C7F);
		border-radius: 27px;
		color: #FFFFFF;
		font-size: 28px;
		line-height: 55px;
		text-align: center;
		margin-right: 17px;
		margin-left: 23px;
	}
   .btn-gray{
		width: 133px;
		height: 55px;
		background: #E2E2E2;
		border-radius: 27px;
		color: #FFFFFF;
		font-size: 28px;
		line-height: 55px;
		text-align: center;
		margin-right: 17px;
		margin-left: 23px;
	}
	.connect-box ul{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	.connect-box ul li{
        width: 722px;
		height: 201px;
		background: #FFFFFF;
		margin: 17px 0 0 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
     /*这里高度后面要判断zyzq的高度*/
	.connect-box{
		width: 100%;
		height: calc(100vh - 88px);
		/* margin-top: 88px; */
		/*background: darkcyan;*/
		overflow-y: scroll;
	}
	.header-conatiner + .connect-box{
		height: calc(100vh - 88px);
	}
	.header-conatiner-zxyhIos + .connect-box{
		height: calc(100vh - 148px);
	} 
	.prize-list-box{
		width: 100%;
		height: 100%;
		background: #FFFFFF;
		overflow: hidden;
	}
	
	  .noprize-box{
		  position: absolute;
		top: 350px; 
		left:calc((100% - 686px)/2);
		width: 686px;
	     height: 388px;
		 background: url('../../assets/images/no-prize.png') no-repeat;
		 background-size: 100% 100%;
	  	
	  }
	 .noprize-box img{
	  
	}
	.noprize-box p{
	  width: 100%;
	  height: 40px;
	  color: #C5C5C5;
	  font-size: 28px;
	  text-align: center;
	}
	.back {
		width: 65px;
		height: 55px;
		background: url(../../assets/images/iconsmall.png) no-repeat;
		background-size: 150px 150px;
		position: absolute;
		top: 20px;
		left: 40px;
		z-index: 100;
	}
</style>